<template>
  <el-container>
    <el-link
      style="margin:10px"
      :underline="false"
      @click="registerVisible=true"
    >注册</el-link>
    <el-dialog
      title="注册"
      :visible.sync="registerVisible"
      center
      :append-to-body="true"
      width="30%"
    >
      <el-form
        status-icon
        ref="ruleForm"
        :rules="rules"
        :model="ruleForm"
        label-width="100px"
      >
        <el-form-item
          label="用户名"
          prop="rusername"
          style="padding-right:60px"
        >
          <el-input
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
          style="padding-right:60px"
        >
          <el-input
            type="email"
            v-model="ruleForm.email"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="rpassword"
          style="padding-right:60px"
        >
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
            @keyup.enter.native="register('ruleForm')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button
          type="primary"
          @click="register('ruleForm')"
        >注册</el-button>
        <el-button
          type="info"
          @click="resetregister('ruleForm')"
        >重置</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  name: 'Register',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z!@#\$%^&*\\d]{8,}\$/.test(value)){
        callback(new Error('要求由8位以上大小写字母、数字组成'))
      }
    }
    var usernamerules = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else if (!/^(?=.{4,20}\$)(?![_0-9])(?!.*[_]{2})[a-zA-Z0-9_-]+(?<![_])\$/.test(value)) { 
        callback(new Error('要求由4-20位首字符为字母组成')) 
      }
    }

    return {
      registerVisible: false,
      ruleForm: {
        username: '',
        email: '',
        password: '',
      },
      rules: {
        username: [{ validator: usernamerules, trigger: 'blur' }],
        email: [{ type: 'email', trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }]
      }
    }
  },
  methods: {
    resetregister (formName) {
      this.$refs[formName].resetFields()
    },
    register (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.$http.post("/api/user",this.ruleForm)
            .then((response) => {
              console.log(response.data);
              console.log(response.status);
              if(response.status == 200) {
                this.$message({
                  message: "注册成功,网页刷新后请重新登录",
                  type: "success",
                  duration: 3000
                });
              }
              else {
                this.$message({
                  message: "用户名已存在",
                  type: "error",
                  duration: 3000
                });
              }
              setTimeout("window.location.reload()",1000);
            })
            .catch(function (error) {
              if (error.response) {
                // 请求已发出，但服务器响应的状态码不在 2xx 范围内
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
              } else {
                // Something happened in setting up the request that triggered an Error
                console.log('Error', error.message);
              }
              console.log(error.config);
            })
        }
      })
    },
  }
}
</script>

<style lang='less' scoped>
</style>
